<template>
  <div class="wrap">
    <div class="titlts">
      <img src="../assets/list.png" alt srcset />
      <p>收款信息</p>
    </div>
    <div class="user">
      <div class="lefts">
        <div class="imgbox">
          <img src alt />
        </div>
        <div class="infobox">
          <p>收款账户名称：乔治马丁</p>
          <p>收款账户：138555561558</p>
        </div>
      </div>
      <el-button type="primary" size="mini" @click="userState = true" >修改</el-button>
    </div>
    <div class="titlts">
      <img src="../assets/list.png" alt srcset />
      <p>交易审核记录</p>
    </div>
    <div class="searchBox">
      <div>
        <span>搜索账号</span>
        <el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
      </div>
      <div>
        <span>搜索交易订单号</span>
        <el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
      </div>
      <div>
        <span>收款人姓名</span>
        <el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
      </div>
    </div>
    <div class="searchBox">
      <div>
        <span>审核状态</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div>
        <span>订单时间</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="searchBtn">
        <el-button type="primary">搜索</el-button>
      </div>
    </div>
    <el-table :data="tableData" stripe style="width: 100%" class="table">
      <el-table-column label="操作" align="center">
        <template>
          <el-button type="primary" @click="userState2=true" size="mini" >审核</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="code" label="用户账号" align="center"></el-table-column>
      <el-table-column prop="recharge_type" label="用户类型" align="center">
        <template slot-scope="scope">{{scope.row.recharge_type==1?'半年会员':'整年会员'}}</template>
      </el-table-column>
      <el-table-column prop="ip" label="付费项目" align="center">
        <template>{{'会员'}}</template>
      </el-table-column>
      <el-table-column prop="amount" label="金额" align="center"></el-table-column>
      <el-table-column prop="order_code" label="交易订单号" align="center"></el-table-column>
      <el-table-column prop="create_time" label="申请时间" align="center"></el-table-column>
      <el-table-column prop="date" label="审核状态" align="center">
        <template slot-scope="scope">
          {{scope.row.is_review==0?'未审核':scope.row.is_review==1?'审核通过':scope.row.is_review==2?'审核未通过':''}}
        </template>
      </el-table-column>
      <el-table-column prop="review_time" label="审核时间" align="center"></el-table-column>
      <el-table-column prop="user" label="收款账户" align="center"></el-table-column>
    </el-table>
       <div class="paginationBox">
          <el-pagination background layout="prev, pager, next" :total="total" :current-page="pageCount" :page-size="pageSize" @current-change="currentPages"></el-pagination>
        </div>
    <setExamine :userState="userState" @getUser="getUser"></setExamine>
    <examineD :userState2="userState2" @getUser2="getUser2"></examineD>
  </div>
</template>
<script>
import setExamine from "./setexamine";
import examineD from "./examineD";
import {rechargeList} from '@/utils/interface'
export default {
  components: {
    setExamine,
    examineD
  },
  data() {
    return {
      tableData: [
        {
          user: "大白",
          code: "1031960596",
          ip: "192.168.1.114",
          date: "2013-09-90 14:25",
          content: "用户乔治马丁删除用户信息"
        },
        {
          user: "大白",
          code: "1031960596",
          ip: "192.168.1.114",
          date: "2013-09-90 14:25",
          content: "用户乔治马丁删除用户信息"
        },
        {
          user: "大白",
          code: "1031960596",
          ip: "192.168.1.114",
          date: "2013-09-90 14:25",
          content: "用户乔治马丁删除用户信息"
        },
        {
          user: "大白",
          code: "1031960596",
          ip: "192.168.1.114",
          date: "2013-09-90 14:25",
          content: "用户乔治马丁删除用户信息"
        }
      ],
      options: [
        {
          value: "选项1",
          label: "待审核"
        },
        {
          value: "选项3",
          label: "已通过"
        },
        {
          value: "选项4",
          label: "已驳回"
        }
      ],
      value: "",
      value1: [],
      userState: false,
      userState2: false,
      currentPage:1,
      pageSize:10,
      total:0,
      pageCount:0,

    };
  },
  methods: {
    getUser() {
      this.userState = false;
    },
    getUser2() {
      this.userState2 = false;
    },
    getList(){
      rechargeList({currentPage:this.currentPage,pageSize:this.pageSize}).then(res=>{
        this.total = res.data.data.total
        this.pageCount = Math.ceil(this.total/this.pageSize)
        this.tableData = res.data.data.list
      })
    },

    currentPages(e){}
  },
  mounted(){
    this.getList()
  }
};
</script>
<style lang="scss" scoped>
.wrap {
  margin-top: 30px;
}
.table {
  margin-top: 30px;
}
.user {
  display: flex;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 30px;
  .lefts {
    display: flex;
    align-items: center;
    border: 0.5px solid #dfdede;
    padding: 15px;
    width: 380px;
    .imgbox {
      border-radius: 4px;
      width: 90px;
      height: 90px;
      border: 0.5px solid #707070;
      padding: 10px;
      img {
        width: 90px;
        height: 90px;
        background: #000;
        border-radius: 4px;
        display: block;
      }
    }
    .infobox {
      height: 110px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      p {
        color: #555;
        font-size: 14px;
        margin-left: 30px;
        height: 55px;
        line-height: 55px;
      }
      p:nth-of-type(1){
         border-bottom: .5px solid #dfdede;
      }
     
    }
  }

  .el-button {
    margin-left: 30px;
  }
}
.searchBox {
  margin: 30px 0;
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    span {
      color: #555;
      font-size: 14px;
      margin-right: 10px;
      display: block;
      width: 140px;
      text-align: right;
    }
    .el-input,
    .el-select,
    .el-date-editor {
      width: 300px;
    }
  }
  .searchBtn {
    width: 450px;
    display: flex;
    justify-content: flex-end;
  }
}
.paginationBox{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>